<form (submit)="login()" [formGroup]="form">
  <div class="form-group">
    <label>
      <span class="label-content">Email address</span>
      <input
        type="email"
        class="form-control"
        [class.is-invalid]="
          form.controls['userId'].invalid &&
          (form.controls['userId'].touched || form.controls['userId'].dirty)
        "
        formControlName="userId"
        placeholder="Enter email"
      />
    </label>
    <div
      class="invalid-feedback"
      *ngIf="
        form.controls['userId'].invalid &&
        (form.controls['userId'].touched || form.controls['userId'].dirty)
      "
    >
      <span>This is not a valid email format.</span>
    </div>
  </div>
  <div class="form-group">
    <label>
      <span class="label-content">Password</span>
      <input
        type="password"
        class="form-control"
        placeholder="Password"
        formControlName="password"
      />
    </label>
  </div>
  <p>
    <a
      [routerLink]="{ route: ['forgotPassword'] } | cxTranslateUrl"
      aria-controls="reset-password"
      class="btn-link"
      >Forgot password?</a
    >
  </p>

  <button
    type="submit"
    class="btn btn-block btn-primary"
    [disabled]="form.invalid"
  >
    Sign In
  </button>
</form>
